<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid gray;
            float: left;
            /*默认情况下,俩俩之间得边框重叠边框就会变成2px*/
            margin-left: -1px;
            position: relative;
        }

        /*鼠标经过时边框变为红色*/
        div:hover {
            border: 1px solid red;
            /*由于使用负数margin后面的元素会遮挡前面的导致前面的元素只显示三条边框*/
            /*解决方法以：使用相对定位，定位比普通流高一级会显示在其他元素之上*/
            /* position: relative;*/
            /*如果都有定位使用z-index提升优先级*/
            z-index: 1;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>